<template>
  <div class="electronic-equipment">
    <div v-if="form.checkValue">
      <div class="equipment">
        <p class="divider">
          <img width="60"
               height="24"
               :src="require('@static/images/secondEquipment.png')" />
          <img v-show="form.checkValue === 3 && form.isThirdShow"
               :src="require('@static/images/delete.png')"
               class="divider-delete"
               @click="handleDelete(1)" />
        </p>
        <track-supplement :form-info="formInfo"
                          :check-value="form.checkValue"
                          :process="2"
                          @select="handleRadio"
                          @refreshPaterForm="refreshPaterForm" />
      </div>
      <div v-if="form.isThirdShow"
           class="equipment">
        <template>
          <p class="divider">
            <img width="60"
                 height="24"
                 :src="require('@static/images/thirdEquipment.png')" />
            <img :src="require('@static/images/delete.png')"
                 class="divider-delete"
                 @click="handleDelete(2)" />
          </p>
          <electronic-reply-form :form-info="formInfo"
                                 :num="2" />
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import TrackSupplement from "./TrackSupplement.vue";
import ElectronicReplyForm from "./ElectronicReplyForm.vue";

export default {
  name: "ElectronicEquipment",
  components: {
    TrackSupplement,
    ElectronicReplyForm
  },
  props: {
    trackType: {
      type: Number,
      default: 1
    },
    formInfo: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      thirdDevice: "",
      form: {}
    };
  },
  created () {
    this.form = this.formInfo;
    console.log("aaaa", this.form.checkValue);
  },
  methods: {
    // 增加第三段
    handleRadio (val) {
      this.form.isThirdShow = val;
      this.form.deleteFlag = !this.form.isThirdShow;
    },
    // 删除icon
    handleDelete (type) {
      if (type == 1) {
        let arr = [];
        arr[0] = this.form.currentAddress[1];
        this.form.currentAddress = arr;
        this.form.secondDeviceCode = this.form.thirdDeviceCode;
        this.form.secordReceiptAddress = { ...this.form.receiptAddress };
      } else {
        if (this.form.checkValue === 3) {
          this.form.currentAddress = this.form.currentAddress.splice(0, 1);
        } else {
          this.form.deleteFlag = true;
        }
      }
      for (let key in this.form.receiptAddress) {
        this.form.receiptAddress[key] = "";
      }
      this.form.isThirdShow = false;
      this.form.thirdDeviceCode = null;
    },
    refreshPaterForm () {
      this.$emit("refreshPaterForm");
    }
  }
};
</script>

<style lang="scss">
.electronic-equipment {
  // min-height: 400px;
}
.divider {
  position: relative;
  left: -30px;
}
.divider-delete {
  position: absolute;
  top: -6px;
  left: 106%;
  padding: 0 15px;
  color: #666;
  font-size: 14px;
  // background-color: #dcdfe6;
}
.ele-wrap {
  padding: 0 20px 10px;
  border: 1px solid #dcdfe6;
}
.equipment {
  width: 565px;
  min-height: 100px;
  max-height: 255px;
  background-color: #fafafa;
  opacity: 1;
  margin-bottom: 30px;
  padding: 0 30px;
}
</style>
